<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html lang="zxx">

<head>
	<title>用户注册</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Full Screen Enroll Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />

	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- Meta tag Keywords -->

	<!-- css files -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/register/css/style.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/register/css/fontawesome-all.css">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->

	<!-- web-fonts -->
	<link href="//fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=devanagari,latin-ext"
	    rel="stylesheet">
	<!-- //web-fonts -->
</head>

<body>
	<div class="main-w3ls">
		<div class="left-content">
			<div class="w3ls-content">
				<!-- logo -->
				<h1>
					<a href="userRegister.jsp"><i class="fab fa-accusoft"></i>GO运动</a>
				</h1>
				<!-- //logo -->
				<h2>——————致力于打造最全运动健身网站!!!!</h2>
				<a href="${pageContext.request.contextPath}/page/index1.jsp" class="button-w3ls">
					<i class="fas fa-long-arrow-alt-right"></i>
				</a>
				<ul class="nav-w3ls">
					<li>
						<a id="return">首页</a>
					</li>
					<li>
						<a href="#">关于我们</a>
					</li>

					<li>
						<a href="#">联系我们</a>
					</li>
				</ul>
			</div>
			<!-- copyright -->
			<div class="copyright">
				<p>&copy; 2018 Full Screen Enroll Form. All rights reserved | Design by
					<a href="http://w3layouts.com">GO运动</a>
				</p>
			</div>
			<!-- //copyright -->
		</div>
		<div class="right-form-agile">
			<!-- content -->
			<div class="sub-main-w3">
				<h3>用户注册</h3>
				<h5>您的注册是</h5>
				<p>对我们最大的鼓励</p>
				<form action="${pageContext.request.contextPath}/UserController/register" method="post" id="regForm">
					<div  class="form-style-agile">
						<label id="userNameId">Your Name</label>
						<div  class="pom-agile">
							<span class="fas fa-user"></span>
							<input placeholder="Your Name" id="userName" name="userName" type="text" required="">
						</div>
					</div>

					<div class="form-style-agile">
						<label id="passwordId">Password</label>
						<div class="pom-agile">
							<span class="fas fa-key"></span>
							<input placeholder="Password" name="password" type="password" id="password1" required="">
						</div>
					</div>
					<div class="form-style-agile">
						<label id="repasswordId">Confirm Password</label>
						<div class="pom-agile">
							<span class="fas fa-key"></span>
							<input placeholder="Confirm Password" name="Confirm Password" type="password" id="password2" required="">
						</div>
					</div>
					<div class="form-style-agile">
						<label id="userPhoneId">phone</label>
						<div class="pom-agile">
							<span class="fas fa-envelope-open"></span>
							<input placeholder="phone" id="phone"name="phone" type="text" required="">
						</div>
					</div>
					<div class="form-style-agile">
						<label id="messageId">message</label>
						<div class="pom-agile" >
							<span class="fas fa-envelope-open"></span>
							<input placeholder="message" id="message" type="text" required=""><div><input type="button" id="sendMsg" value="验证码" ></div>
						</div>
					</div>
					<div class="sub-agile">
						<input type="checkbox" id="brand1" value="">
						<label for="brand1">
							<span></span>我已详细阅读并同意《GO运动用户服务协议》</label>
					</div>

					<input id="submit" type="submit" value="注册">
				</form>
				<div class="login-agileits-bottom wthree">
					<a style="color: white;" id="lo">已有账号？前往登录</a>
				</div>

				<!-- social icons -->
				<div class="w3ls-social">
					<h3>or Login with</h3>
					<ul class="social-nav model-3d-0 footer-social social two">
						<li>
							<a href="#" class="facebook">
								<div class="front">
									<i class="fab fa-facebook-f"></i>
								</div>
								<div class="back">
									<i class="fab fa-facebook-f"></i>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="twitter">
								<div class="front">
									<i class="fab fa-twitter"></i>
								</div>
								<div class="back">
									<i class="fab fa-twitter"></i>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="instagram">
								<div class="front">
									<i class="fab fa-instagram"></i>
								</div>
								<div class="back">
									<i class="fab fa-instagram"></i>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="pinterest">
								<div class="front">
									<i class="fab fa-linkedin-in"></i>
								</div>
								<div class="back">
									<i class="fab fa-linkedin-in"></i>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<!-- //social icons -->
			</div>
		</div>
	</div>
	<!-- //content -->
	<!-- password-script -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
	<script>
		/*window.onload = function () {
			document.getElementById("password1").onchange = validatePassword;
			document.getElementById("password2").onchange = validatePassword;
		}

		function validatePassword() {
			var pass2 = document.getElementById("password2").value;
			var pass1 = document.getElementById("password1").value;
			if (pass1 != pass2)
				document.getElementById("password2").setCustomValidity("Passwords Don't Match");
			else
				document.getElementById("password2").setCustomValidity('');
			//empty string means no validation error
		}*/

		$(function() {
			//用户名输入栏失去焦点事件
			$("#userName").blur(function() {
				if ($("#userName").val().trim() == "") {
					$("#userNameId").text("用户名不能为空");
				} else {
					$.get("${pageContext.request.contextPath}/UserController/checkName", {

						userName : $("#userName").val()
					}, function(data) {
						$("#userNameId").text(data);
					})
				}
			})
			//密码输入栏失去焦点事件
			$("#password1").blur(function() {

				if ($("#password1").val().trim() == "") {
					$("#passwordId").text("密码不能为空");
				} else {
					if($("#password1").val().trim().length<=6 && $("#password1").val().indexOf(" ")==-1){
						$("#passwordId").text("可用");
					}else{
						$("#passwordId").text("用户名长度不超过6位且不能含有空格");
					}
				}
			})
			//密码重复栏失去焦点事件
			$("#password2").blur(function() {
				var upwd=$("#password2").val().trim();
				var reupwd=$("#password2").val().trim();
				if ($("#password2").val().trim() == "") {
					$("#repasswordId").text("确认密码不能为空");
				} else {
					if(upwd==reupwd){
						$("#repasswordId").text("两次密码一致");
					}else{
						$("#repasswordId").text("两次密码不一致");
					}
				}
			})
			//电话号码输入失去焦点事件
			$("#phone").blur(function() {
				//正则表达式
				var regPhone=/^1[3|4|5|7|8|9][0-9]{9}$/;
				var phone=$("#phone").val().trim();
				if (phone == "") {
					$("#userPhoneId").text("电话不能为空");
				} else {
					if(regPhone.test(phone)){
						$("#userPhoneId").text("可用");
					}else{
						$("#userPhoneId").text("请输入有效的电话");
					}
				}
			})
			//判断是否可以提交
			$("#regForm").submit(function(){
				if($("#userNameId").text()=="可用"&&$("#passwordId").text()=="可用"
						&&$("#repasswordId").text()=="两次密码一致"&&$("#userPhoneId").text()=="可用"&&$("#messageId").text()=="验证码正确"){
					return true;
				}else{

					return false;
				}
			})

			//返回首页
			$(document).on("click","#return",function(){
				location.href="../page/index1.jsp";
			})
			//返回登录
			$(document).on("click","#lo",function(){
				location.href="../login/userLogin.jsp";
			})
			//发送验证码
			$(document).on("click","#sendMsg",function(){
				$.get("${pageContext.request.contextPath}/UserController/sendMs", {

					phone:$("#phone").val()
				}, function(data) {
					$("#message").blur(function() {
						if(data==$("#message").val()){
							$("#messageId").text("验证码正确");
						}else{
							$("#messageId").text("验证码错误");
						}
					})
				})
			})



		})
	</script>
	<!-- //password-script -->

</body>

</html>